import {Column, Id, Task} from "../types.ts";
import TrashIcon from "../icons/TrashIcon.tsx";
import {SortableContext, useSortable} from "@dnd-kit/sortable";
import {CSS} from "@dnd-kit/utilities"
import {useMemo, useState} from "react";
import PlusIcon from "../icons/PlusIcon.tsx";
import TaskCard from "./TaskCard.tsx";

interface Props {
    column: Column;
    deleteColumn: (id: Id) => void;
    updateColumn: (id: Id, title: string) => void;

    tasks: Task[];
    createTask: (columnId: Id) => void;
    deleteTask: (id: Id) => void;
    updateTask: (id: Id, content: string) => void;
}

function ColumnContainer(props: Props) {
    const {column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask} = props
    const [editMode, setEditMode] = useState(false)

    const taskIds = useMemo(() => {
        return tasks.map(task => task.id)
    }, [tasks])

    const {setNodeRef, attributes, listeners, transform, transition, isDragging} = useSortable({
        id: column.id,
        data: {
            type: "Column",
            column
        },
        disabled: editMode
    })

    const style = {
        transition,
        transform: CSS.Transform.toString(transform)
    }

    if (isDragging) {
        return (
            <div
                ref={setNodeRef} style={style}
                className="bg-columnBackgroundColor w-[350px] h-[500px]
                           max-h-[500px] rounded-md flex flex-col
                           opacity-40 border-2 border-rose-500">

            </div>
        )
    }

    return (
        <div
            ref={setNodeRef} style={style}
            className="bg-columnBackgroundColor w-[350px] h-[500px] max-h-[500px]
                        rounded-md flex flex-col">
            <div
                {...attributes} {...listeners}
                onClick={() => {
                    setEditMode(true)
                }}
                className="bg-mainBackgroundColor text-md h-[60px] cursor-grab
                            rounded-md rounded-b-none p-3 font-bold
                            border-columnBackgroundColor border-4 flex
                            items-center justify-between">
                <div className="flex gap-2">
                    <div className="flex justify-center items-center
                                    bg-columnBackgroundColor px-2 py-1 text-sm
                                    rounded-full">
                        0
                    </div>
                    {!editMode && column.title}
                    {editMode &&
                        <input
                            className="bg-black focus:border-rose-500 border
                                       rounded outline-none px-2"
                            autoFocus={true}
                            value={column.title}
                            onChange={(e) => {
                                updateColumn(column.id, e.target.value)
                            }}
                            onBlur={() => {
                                setEditMode(false)
                            }}
                            onKeyDown={(e) => {
                                if (e.key !== 'Enter') return
                                setEditMode(false)
                            }}
                        />
                    }
                </div>
                <button
                    onClick={() => {
                        deleteColumn(column.id)
                    }}
                    className="stroke-gray-500 hover:stroke-white
                                   hover:border-columnBackgroundColor
                                   rounded px-1 py-2">
                    <TrashIcon></TrashIcon>
                </button>
            </div>
            <div className="flex flex-grow flex-col gap-4 p-2
                            overflow-x-hidden overflow-y-auto">
                <SortableContext items={taskIds}>
                    {
                        tasks.map(task => {
                            return (
                                <TaskCard task={task} key={task.id}
                                          deleteTask={deleteTask}
                                          updateTask={updateTask}
                                >
                                </TaskCard>
                            )
                        })
                    }
                </SortableContext>
            </div>
            <button className="flex gap-2 items-center border-2
                               border-columnBackgroundColor
                               rounded-md p-4 border-x-columnBackgroundColor
                               hover:bg-mainBackgroundColor
                               hover:text-rose-500
                               active:bg-black"
                    onClick={() => {
                        createTask(column.id)
                    }}
            >
                <PlusIcon></PlusIcon>Add task
            </button>
        </div>
    )
}

export default ColumnContainer